<template>
  <div>
    <Card>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item">
            <Input v-model="searchObj.keywords" placeholder="优惠券名称、用户名称" style="width:250px" />
          </div>
          <div class="flex-item">
            <DatePicker @on-change="changeTime" type="daterange" placeholder="请选择赠送时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="warning">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
          <div class="flex-item search-btn">
            <Button type="warning" @click="exportExcel" >导出</Button>
          </div>
        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">

      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>
    </Card>


  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    givList,
    exportData

  } from '@/api/marketing-group/givList'
  import {
    tableOption
  } from '../../../data/marketing-group/givList.js'
  import Tables from '_c/tables'
  import {
    formatDate
  } from '@/config/publicTool.js' // 日期转换,//调用的时候formatDate(),不需要this

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    created() {
      let _this = this
      this.$nextTick(function() {
        // 权限校验
        _this.role_export = permission(this.roles, 'coupon/exportGivData')

      })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({

        roles: state => state.user.roles

      }),
    },
    data() {
      return {
        // 权限标识
        role_build:false,
        // 上传
        tableOption: tableOption,
        delId: '',
        data: {
          related: [],
          store: [],
          list: [{
            name: '测试数据',
            id: 1
          }],
          class: []
        },
        createTitle: ' ',
        isAdd: true, // 新增true,修改false
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        loadingText: '',

        // 查询参数
        searchObj: {
          name: '',
          send_time:''

        },
        // 分页
        page: {
          pageSize: 8,
          current: 1,
          total: 0
        },


      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this

        let params = {
          page: this.page.current,
          name: this.searchObj.keywords,
          send_time:_this.searchObj.send_time
        }

        givList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size


          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      // 刷新
      refresh() {
        this.searchObj = {
          send_time: [],
          name: '',

        } // 清空搜索框
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {
          send_time: [],
          name: '',

        } // 清空搜索框
        this.getList()
      },
      // 查询
      search() {
        this.getList()
      },
      changepage(e){
        this.page.current=e
      },
      exportExcel() {
        if (!this.role_export) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        let _this = this

        let obj = {
          page: this.page.current,
          name: _this.searchObj.keywords,
          send_time:_this.searchObj.send_time
        }

        exportData(obj).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data.url

            window.location.href = result
          } else {
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          // console.log(error)
        })
      },
      changeTime(e) {
        this.searchObj.send_time = e
      },
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
